<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!--360浏览器优先以webkit内核解析-->

    <title>H+ 后台主题UI框架 - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="static/js/plugins/layui/css/layui.css">
    <link href="static/css/bootstrap.min.css?v=3.3.7" rel="stylesheet"/>
    <link href="static/css/font-awesome.css?v=4.4.0" rel="stylesheet"/>
    <link href="static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="static/css/animate.css" rel="stylesheet"/>
    <link href="static/css/style.css?v=4.1.0" rel="stylesheet"/>
    <style>
        .ibox-title {
            min-height: 15px;
        }

        .ml_20 {
            margin-left: 20px;
        }

        .w100 {
            width: 100px !important;
        }

        .mt-60 {
            margin-top: -60px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label for="p_name" class="">用户名称:</label>
                            <input type="text" id="p_name" name="p_name" class="form-control">
                        </div>
                        <button class="btn btn-white" type="button" id="search">查询</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="wrapper wrapper-content animated fadeInRight mt-60">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="static/js/jquery.min.js?v=2.1.4"></script>
<script src="static/js/bootstrap.min.js?v=3.3.7"></script>
<script src="static/js/plugins/layui/layui.js"></script>

			<!-- 自定义js -->
			<script src="static/js/content.js"></script>
			<!-- Peity -->
			<script src="static/js/demo/bootstrap-table-demo.js"></script>

			<!-- 欢迎信息 -->
			<script src="static/js/welcome.js"></script>



<script type="text/html" id="checkboxTpl">

    <!-- <input type="checkbox" name="aaa" id="aaa" checked=""> -->
    <!-- <input type="checkbox" name="open" id="aaa" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"> -->
    <input type="checkbox" name="sex" id="aaa" value="d.zhanghao" lay-skin="switch" lay-text="被封|正常" lay-filter="sexDemo" {{ d.type == '1' ? 'checked' : '' }}>

</script>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="del">删除</a>
</script>


<script>


    layui.use(['form','laydate', 'table'], function () {
        let laydate = layui.laydate;
        let table = layui.table;
        let layer = layui.layer;
        let form = layui.form;
        laydate.render({
            elem: '#grounding_date'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            , range: ['#grounding_date_from', '#grounding_date_to']
        });

        var tableIns = table.render({
            id:'idTest',
            elem: '#test',
            height: 400,
            page: true,
            toolbar: '#toolbarDemo',
            url: 'record?opr=select'
            // , url: '/static/json/table/user.json'
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }
            , cols: [[ //标题栏
                {field: 'id', title: 'id', width: 150}
                , {field: 'ordernumber', title: '订单编号', width: 123}
                , {field: 'date', title: '订单时间', width: 200}
                , {field: 'jiage', title: '金额', width: 200}
                , {field: 'commodity', title: '商品名字', width: 230}
                , {field: 'userzhanghao', title: '买家账号', width: 180, unresize: true}
                , {title: '操作', width: 133, minWidth: 125, toolbar: '#barDemo'}
            ]],

        })


        $("#search").click(function () {
            var p_name = $("#p_name").val();
            if (p_name != "") {
                tableIns.reload({
                    where: {
                        p_name: p_name,
                    }
                })
            }else if (p_name=="") {
                tableIns.reload({
                    where: {
                        p_name: p_name,
                    }
                })
            }
        })

        //触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        "url": "record?opr=delete",
                        "dataType": 'text',
                        "type": 'post',
                        "data": {id: obj.data.id},
                        "async": false,
                        "success": function (data) {
                            if (data == "true") {
                                layer.msg("删除成功");
                                tableIns.reload({
                                })
                            } else {
                                layer.msg("删除失败");
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                $.ajax({
                    "url": "usercrud?opr=idset",
                    "dataType": 'text',
                    "type": 'post',
                    "data": {zhanghao: obj.data.zhanghao},
                    "async": false,
                })

                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['60%', '75%'],
                    content: 'user_edit.jsp',
                });
            }



        });

        table.on('toolbar(test)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['60%', '75%'],
                    content: 'record_add.jsp',
                    end:function() {
                        location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });

        form.on('switch(sexDemo)', function (obj) {
            let zhanghao=obj.value;
            let i="";
            if (this.checked == true) {
                i=1
            }else if(this.checked == false){
                i=2
            }

            $.ajax({
                "url": "usercrud?opr=typeupdate",
                "dataType":'int',
                "type":'post',
                "async": false,
                "data":({"i":i,"zhanghao":zhanghao}),
            })
            layer.msg('用户状态' + (i=='1' ? '封号' : '正常'), {
                offset: '6px'
            });
        });

    });



    $("#search").click(function () {
        console.log($("#p_name").val());
        console.log($("#grounding_date_from").val());
        console.log($("#grounding_date_to").val());

        // 数据获取方式二
        console.log($("from").serialize());
    });

    //日期范围

</script>
</body>

</html>